---
title: "addEventListener"
description: "The `addEventListener` function allows you to listen for specific events emitted by the HotUpdater. This is useful for tracking update progress or other events during the update process."
icon: Headphones
---

<Callout type="warn">
For most use cases involving bundle download progress bar displays, it's more convenient to use the store hook instead of this listener. See [useHotUpdaterStore](./useHotUpdaterStore).
</Callout>

## Usage

Use `addEventListener` to subscribe to HotUpdater events. It returns an unsubscribe function to clean up the listener when it's no longer needed.

```tsx
import { HotUpdater } from "@hot-updater/react-native";

const unsubscribe = HotUpdater.addListener("onProgress", ({ progress }) => {
  console.log(`Update progress: ${progress * 100}%`);
});

// Later, when you no longer need the listener
unsubscribe();
```

## Event Type

The `HotUpdaterEvent` type defines the available events and their corresponding payloads.

```typescript
export type HotUpdaterEvent = {
  onProgress: {
    progress: number;
  };
};
```

## Parameters

| Parameter   | Type                                  | Required | Description                                 |
|-------------|---------------------------------------|----------|---------------------------------------------|
| `eventName` | `keyof HotUpdaterEvent`                | ✅        | The name of the event to listen for.          |
| `listener`  | `(event: HotUpdaterEvent[T]) => void` | ✅        | The callback function to handle the event.    |

## Return Value

The `addEventListener` function returns a cleanup function that removes the event listener when called.

```typescript
const unsubscribe = HotUpdater.addListener("onProgress", ({ progress }) => {
  console.log(`Update progress: ${progress * 100}%`);
});

// Unsubscribe when done
unsubscribe();
```

## Example

Here's an example of how to use `addEventListener` in a React Native component:

```tsx
import React, { useEffect } from "react";
import { addListener } from "@hot-updater/react-native";
import { View, Text } from "react-native";

function App() {
  useEffect(() => {
    const unsubscribe = addListener("onProgress", ({ progress }) => {
      console.log(`Update progress: ${progress * 100}%`);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <View>
      <Text>Hello World</Text>
    </View>
  );
}

export default App;
```
